<div id="content" style="position: relative;min-height: 100%;">
    <div id="fix_overflow" style="overflow: initial;">
        <div class="row s_page_title">
            <sa-big-breadcrumbs [items]="['运输任务','订单监控[GPS]']" icon="fa fa-truck" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
        </div>
        <sa-widgets-grid>
            <div class="s_table">
                <div sa-widget [editbutton]="false" color="darken" class="clearfix">
                    <header><span class="widget-icon"> <i class="fa fa-table"></i> </span>
                        <h2>订单监控[GPS]</h2>
                    </header>
                    <div>
                        <div class="widget-body no-padding">
                            <div class="page-header clearfix s_table_opreation" style="position: relative;">
                                <div class="left page-header-btn" style="width: calc(100% - 220px);">
                                    <sa-company-tree-car companyTreeId="companyTree" [isShowCarSort]="true" (companySelected)="companySelected($event)"></sa-company-tree-car>
                                    <!--<div class="top_module top_module_box">
										<span class="top_module_label module_text">状态</span>
										<select name="" class="top_module_select" [(ngModel)]="checkStatus">
											<option value="">全部</option>
											<option value="1">GPS异常</option>
											<option value="6">设备离线</option>
											<option value="0">正常卸货</option>
										</select>
									</div>-->
                                    <div class="top_module top_module_box">
                                        <span class="top_module_label module_text">时间类型</span>
                                        <select name="" class="top_module_select" [(ngModel)]="dateType">
											<option value="1">进厂时间</option>
											<option value="2">离厂时间</option>
											<option value="3">订单结束时间</option>
										</select>
                                    </div>
                                    <div class="selectDate top_module">
                                        <div class="input-daterange input-group s_selected_time_box s_hover_box">
                                            <input type="text" [(ngModel)]='startTime' class="form-control s_selected_time" id="datetimepicker1" autocomplete="off" placeholder="选择开始时间" />
                                            <span class="s_selected_time_spe">至</span>
                                            <input type="text" [(ngModel)]='endTime' class="form-control s_selected_time" id="datetimepicker2" autocomplete="off" placeholder="选择结束时间" />
                                            <div class="s_del_icon" (click)='del_date()'>x</div>
                                        </div>
                                    </div>
                                    <div class="top_module top_module_box" style="min-width: 60px;">
                                        <label class="checkbox-inline" style="font-size: 14px;height:28px;line-height: 28px;vertical-align: middle;">
								            <input type="checkbox" class="checkbox" (change)="isBsjChange($event.target.checked)">
								            <span>博实结设备</span>
							          	</label>
                                    </div>
                                    <button type="button" class="btn btn-primary" (click)="table_search()">查询</button>
                                    <button type="button" class="btn btn-primary" (click)="exportReport()">导出</button>
                                </div>
                                <div class="right top-search" style="width:220px">
                                    <input type="text" [(ngModel)]="searchKey" (change)="table_search()" class="search-input" placeholder="公司/车牌/设备ID/订单号/地址">
                                    <span class="top-search-box">
										<button class="top-search-btn" type="button" (click)="table_search()"> <i class="fa fa-search"></i></button>
									</span>
                                </div>
                            </div>
                            <div class="" style="">
                                <ul class="nav nav-tabs" id="myTab" style="padding-left:12px;background-image: linear-gradient(#F1F5FD, #E9F0FF);padding: 0;">
                                    <li class="active s-lis"><a data-toggle="tab" href="#all" (click)="btnClick('all')">全部 <span >{{tabNumberList[0]}}</span></a></li>
                                    <li class="s-lis"><a data-toggle="tab" href="#trans" (click)="btnClick('trans')">运输中 <span class="orange">{{tabNumberList[1]}}</span></a></li>
                                    <li class="s-lis"><a data-toggle="tab" href="#normal" (click)="btnClick('normal')">正常卸货 <span class="green">{{tabNumberList[2]}}</span></a></li>
                                    <li class="s-lis"><a data-toggle="tab" href="#gpsError" (click)="btnClick('gpsError')">GPS异常 <span class="red">{{tabNumberList[3]}}</span></a></li>
                                    <li class="s-lis"><a data-toggle="tab" href="#deviceOffLine" (click)="btnClick('deviceOffLine')">设备离线 <span class="red">{{tabNumberList[4]}}</span></a></li>
                                </ul>
                            </div>
                            <div class="table_scroll">
                                <table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
                                    <thead>
                                        <tr>
                                            <th>操作</th>
                                            <th>状态</th>
                                            <th>订单编号</th>
                                            <th>车牌号码</th>
                                            <th>公司名称</th>
                                            <th>产品名称</th>
                                            <th>进厂时间</th>
                                            <th>离厂时间</th>
                                            <th>订单结束时间</th>
                                            <th>卸货地址</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr *ngFor="let row of tableData; let i = index" [attr.data-index]="i" [ngClass]='{selected: activeSelected === row.id }' (dblclick)="rowSelectEvent(row,row.id)">
                                            <td>
                                                <button type="button" (click)="rowSelectEvent(row,row.id)">订单详情</button>
                                            </td>
                                            <td>
                                                <span *ngIf="row.orderStatus == 0 && row.checkStatus == 0" class="orange">运输中</span>
                                                <span *ngIf="row.orderStatus == 1 && row.checkStatus == 0" class="green">正常卸货</span>
                                                <span *ngIf="row.checkStatus == 1" class="red">GPS异常</span>
                                                <span *ngIf="row.checkStatus == 2" class="red">设备离线</span>
                                            </td>
                                            <td>{{row.orderCode}}</td>
                                            <td>{{row.carNumber}}</td>
                                            <td>{{row.companyName}}</td>
                                            <td>{{row.prodName}}</td>
                                            <td>{{row.emptyLoadTime}}</td>
                                            <td>{{row.fullLoadTime}}</td>
                                            <td>{{row.unloadEndTime||'运输中'}}</td>
                                            <td>{{row.address}}</td>
                                            <td>
                                                <button type="button" (click)="delete_Row(row)">删除</button>
                                            </td>

                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="table-fix clearfix">
                                <paginator [totalRecords]="totalCounts" [rows]="pageSize" [currentPage]="curPage - 1" (onPageChange)="paginate($event)">
                                </paginator>
                                <button type="button" class="btn default refresh_btn" (click)="refresh()"><i class="fa fa-refresh"></i></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </sa-widgets-grid>
    </div>
</div>


<!-- 设备详情信息    弹窗-->
<div id="deviceDetailModal">
    <div class="modal-dialog modal-lg" style="width: 1200px;margin: 0;">
        <div class="modal-content">
            <div class="modal-header" id="headDrag">
                <button type="button" class="close" (click)="cancelDeviceDetail()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">详情信息 <span class="note">[ 注: 鼠标点击可拖动 ]</span></h4>
                <div class="selectDate top_module" style="position: absolute;right: 36px;top: 10px;">
                    <button type="button" class="btn btn-primary" (click)="reserveOrder()" style="float: right;height: 28px;">重新审核</button>
                    <button type="button" class="btn btn-primary" (click)="orderDetailSearch()" style="float: right;height: 28px;margin-left: 12px;">查看</button>
                    <div class="input-daterange input-group s_selected_time_box s_hover_box" style="float: right;">
                        <input type="text" [(ngModel)]='echartStartDate' class="form-control s_selected_time" id="datetimepicker3" autocomplete="off" placeholder="选择开始时间" />
                        <span class="s_selected_time_spe">至</span>
                        <input type="text" [(ngModel)]='echartEndDate' class="form-control s_selected_time" id="datetimepicker4" autocomplete="off" placeholder="选择结束时间" />
                        <div class="s_del_icon" (click)='del_dateBtn()'>x</div>
                    </div>
                </div>

            </div>
            <div class="modal-body" style="padding: 0;background-color: #ffffff;">
                <div class="form-horizontal">
                    <div>
                        <div class="tabbable">
                            <ul class="nav nav-tabs" id="myTab" style="padding-left:12px;background-image: linear-gradient(#F1F5FD, #E9F0FF);">
                                <li class="active s-lis" (click)="initOrderDeviceModal(selectedRow.id)"><a data-toggle="tab" href="#all">订单信息 <span id="allOrders" style=""></span></a></li>
                            </ul>
                            <div class="tab-content" style="padding:20px;padding-top:0;border:none;">
                                <div id="all" class="tab-pane active">
                                    <div class="clearfix">
                                        <div id="popPage1">
                                            <div class="device-module clearfix" *ngIf='selectedRow' style="margin: 10px 0 0 0;padding-bottom: 0;">
                                                <div class="item-box self-xs-20 no-padding"><span class="item-key">车牌号码</span><span class="item-value" [attr.title]="">{{selectedRow.carNumber||'--'}}</span><span *ngIf="selectedRow.deviceId">[{{selectedRow.deviceId}}]</span></div>
                                                <div class="item-box self-xs-20 no-padding"><span class="item-key">公司名称</span><span class="item-value" [attr.title]="">{{selectedRow.companyName||'--'}}</span></div>
                                                <div class="item-box self-xs-20 no-padding"><span class="item-key">安装时间</span><span class="item-value" [attr.title]="">{{deviceBaseInfo.inputDate||'--'}}</span></div>
                                                <div class="item-box self-xs-20 no-padding"><span class="item-key">录入人员</span><span class="item-value" [attr.title]="">{{deviceBaseInfo.userNameForCreate||'--'}}</span></div>
                                                <div class="item-box self-xs-20 no-padding"><span class="item-key">车辆用途</span><span class="item-value" [attr.title]="">{{deviceBaseInfo.userTypeName||'--'}}</span></div>
                                                <div class="item-box self-xs-20 no-padding"><span class="item-key">订单状态</span><span class="item-value" [attr.title]="">
													<span *ngIf="selectedRow.orderStatus == 0 && selectedRow.checkStatus == 0" class="orange">运输中</span>
                                                    <span *ngIf="selectedRow.orderStatus == 1 && selectedRow.checkStatus == 0" class="green">正常卸货</span>
                                                    <span *ngIf="selectedRow.checkStatus == 1" class="red">GPS异常</span>
                                                    <span *ngIf="selectedRow.checkStatus == 2" class="red">设备离线</span>
                                                    </span>
                                                </div>
                                                <div class="item-box self-xs-20 no-padding"><span class="item-key">载重更新</span><span class="item-value" [attr.title]="">{{versionMessage.carUploadDate}}</span></div>
                                                <div class="item-box self-xs-20 no-padding">
                                                    <span class="item-key">传感器</span><span class="item-value" [attr.title]="">
														<sa-sensor-type [sensorTypeId]="deviceBaseInfo.sensorType" type='2'></sa-sensor-type>
													</span>
                                                </div>
                                                <div class="item-box self-xs-20 no-padding"><span class="item-key">车辆状态</span><span class="item-value" [attr.title]="">
													<span class="red" *ngIf="versionMessage.runStatus=='0'">离线</span><span class="green" *ngIf="versionMessage.runStatus!=='0'">在线</span><span class="red" *ngIf="versionMessage.isShowGPS">[GPS更新异常]</span>
                                                    </span>
                                                </div>
                                                <div class="item-box self-xs-20 no-padding"><span class="item-key">GPS更新</span><span class="item-value" [attr.title]="">{{versionMessage.gpsUploadDate}}</span></div>
                                                <div class="item-box self-xs-20 no-padding" style="width: 40%;">
                                                    <span class="item-key">算法版本</span>
                                                    <span class="item-value" [attr.title]="versionMessage.name" style="max-width:100%">{{versionMessage.name}}</span>
                                                </div>
                                                <div class="item-box self-xs-20 no-padding"><span class="item-key">维修人</span><span class="item-value" [attr.title]="">{{selectedRow.repairedUser||'--'}}</span></div>
                                                <div class="item-box self-xs-20 no-padding">
                                                    <span class="item-key">维修记录</span>
                                                    <span class="item-value" [attr.title]="selectedRow.repairedRecords && selectedRow.repairedRecords" style="max-width:calc(100% - 84px)">
														<span *ngIf='selectedRow.repairedRecords && selectedRow.repairedRecords.length >0'>
															<span *ngFor="let lis of selectedRow.repairedRecords">
																<span style="font-weight: bold;">{{lis}}</span>
                                                    </span>
                                                    </span>
                                                    <span *ngIf='selectedRow.repairedRecords == null || selectedRow.repairedRecords == undefined || selectedRow.repairedRecords.length == 0'>--</span>
                                                    </span>
                                                </div>
                                                <div class="item-box self-xs-20 no-padding"><span class="item-key">最近维修</span><span class="item-value" [attr.title]="">{{selectedRow.lastServiceTime||'--'}}</span></div>
                                            </div>

                                            <div class="device-module clearfix fix-device-module" *ngIf='selectedRow'>
                                                <div class="item-box col-xs-12 no-padding red" *ngIf="selectedRow.remark"><span class="item-key">备注: </span><span class="item-value" [attr.title]="">{{selectedRow.remark}}</span></div>
                                            </div>
                                            <div id="popContent">
                                                <div class="chartBox" style="padding-bottom:12px;">
                                                    <div class="echart-map-box">
                                                        <div style="position: relative;" class="inline_block" id="echartBox">
                                                            <div class="chartEmpty">{{processInfo}}</div>
                                                            <div id="baiduMap" style="height: 390px;width:678px;"></div>
                                                            <sa-bmap-tools [baiduMap]="baiduMapTools" [isShowZoom]="true" [reduceWidth]="472"></sa-bmap-tools>

                                                        </div>
                                                        <div class="inline_block" style="position: relative;width: 0;" id="allmapBox">
                                                            <div id="chart" style="height: 390px;width:478px;"></div>
                                                            <div class="v-player-icons" (click)="IsShowMap()">
                                                                <i class="fa  fa-angle-left v-icon" [ngClass]="{none:vIcon == '1'}"></i>
                                                                <i class="fa  fa-angle-right v-icon" [ngClass]="{none:vIcon == '0'}"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div *ngIf="selectedRow&&selectedRow.listEvent.length>0">
                                                    <ul style="border: 1px solid #eee;padding: 8px;border-radius: 4px;max-height:83px;overflow-y: auto;">
                                                        <li *ngFor="let item of selectedRow.listEvent" class="red">
                                                            <span>{{item.eventName}} : </span>
                                                            <span>{{item.eventDescription}} </span>
                                                            <span>{{item.startTime}}</span>
                                                            <span *ngIf="item.eventName && item.eventName"> 至 </span>
                                                            <span>{{item.endTime}}</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--设备详情信息  end-->